<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        .block-content {
            display: flex;
            flex-wrap: wrap;
        }

        .goods-list {
            width: 25%;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .goods-block {
            width: 260px;
            padding: 0 30px;
        }

        .goods-img {
            width: 200px;
            height: 200px;
        }

        .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .add-card {
            width: 30px;
            height: 30px;
        }

        .mt20 {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">对外经贸学生系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" style="color:#ff0000;" ><span id="loginUser"></span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统功能 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li role="separator" class="divider"></li>
                        <li><a href="#" onclick="exitSys()">安全退出</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="block-content" id="blockData">
    <div class="panel panel-default" style="width: 100%;">
        <div class="panel-heading">
            <h3 class="panel-title">学生信息</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>学号:</label>
                        <p class="form-control-static" id="displayStudentId"></p>
                    </div>
                    <div class="form-group">
                        <label>姓名:</label>
                        <p class="form-control-static" id="displayName"></p>
                    </div>
                    <div class="form-group">
                        <label>性别:</label>
                        <p class="form-control-static" id="displayGender"></p>
                    </div>
                    <div class="form-group">
                        <label>出生日期:</label>
                        <p class="form-control-static" id="displayBirthDate"></p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>学院:</label>
                        <p class="form-control-static" id="displayCollege"></p>
                    </div>
                    <div class="form-group">
                        <label>专业:</label>
                        <p class="form-control-static" id="displayMajor"></p>
                    </div>
                    <div class="form-group">
                        <label>班级:</label>
                        <p class="form-control-static" id="displayClassName"></p>
                    </div>
                    <div class="form-group">
                        <label>学籍状态:</label>
                        <p class="form-control-static" id="displayStatus"></p>
                    </div>
                    <div class="form-group">
                        <label>身份证号:</label>
                        <p class="form-control-static" id="displayIdCard"></p>
                    </div>
                    <div class="form-group">
                        <label>邮箱:</label>
                        <p class="form-control-static" id="displayEmail"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 学生信息模态框 -->
<div class="modal fade" id="infoModal" tabindex="10" role="dialog" aria-labelledby="infoModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">学生详细信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <!-- 学生信息 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">学号</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoStudentId"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">姓名</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoName"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">性别</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoGender"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">出生日期</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoBirthDate"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">身份证号</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoIdCard"></p>
                        </div>
                    </div>

                    <!-- 学业信息 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">学院</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoCollege"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">专业</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoMajor"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">班级</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoClassName"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">学籍状态</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoStatus"></p>
                        </div>
                    </div>

                    <!-- 住宿信息 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">宿舍楼</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoDormId"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">床位号</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoBedNumber"></p>
                        </div>
                    </div>

                    <!-- 联系信息 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">手机号</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoPhone"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">电子邮箱</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoEmail"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">紧急联系人</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoEmergencyContact"></p>
                        </div>
                    </div>

                    <!-- 账户信息 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">登录账号</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="infoUsername"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">密码</label>
                        <div class="col-sm-9">
                            <p class="form-control-static text-muted">********</p>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


</body>
</html>
<script>
    // console.log("All localStorage:", localStorage);
    // 初始化用户信息
    let loginAccount = localStorage.getItem("account");
    // let loginuser = localStorage.getItem("account")
    // console.log(localStorage.getItem("account"))
    // if (!loginuser){
    //     console.log("没有用户信息")
    // }
    document.getElementById("loginUser").innerText = localStorage.getItem("account")


    // 页面加载时验证登录状态
    window.onload = function() {
        if (!loginAccount) {
            alert("请先登录系统");
            window.location.href = "stuLogin.html";
            return;
        }
        document.getElementById("loginUser").innerText = loginAccount;
        loadStudentInfo();
    };
    // 加载学生信息
    function loadStudentInfo() {
        $.ajax({
            url: 'selectinfo',
            type: 'GET',
            data: {
                username: loginAccount
            },
            dataType: 'json',
            contentType: 'application/json',
            success: function(response) {
                console.log('服务器返回的原始响应:', response);
                if (response && response.studentId) {
                    // 基础信息
                    $('#displayStudentId').text(response.studentId || '--');
                    $('#displayName').text(response.name || '--');
                    $('#displayGender').text(response.gender || '--');
                    $('#displayBirthDate').text(formatDate(response.birthDate));
                    
                    // 学业信息
                    $('#displayCollege').text(response.college || '未分配');
                    $('#displayMajor').text(response.major || '未分配');
                    $('#displayClassName').text(response.className || '未分配');
                    $('#displayStatus').text(getStatusText(response.status) || '--');
                    $('#displayIdCard').text(response.idCard ? response.idCard.replace(/^\d{3}\d{11}(\d{4})$/, "***********$1") : '--');
                    $('#displayEmail').text(response.email || '--');
                    
                    // 联系信息
                    $('#displayPhone').text(response.phone || '--');
                    $('#displayEmail').text(response.email || '--');
                    $('#displayEmergencyContact').text(response.emergencyContact || '--');
                    
                    // 住宿信息
                    $('#displayDormId').text(response.dormId ? `#${response.dormId}` : '未分配');
                    $('#displayBedNumber').text(response.bedNumber || '--');
                    
                    // 联系信息
                    $('#displayPhone').text(response.phone || '--');
                    $('#displayEmail').text(response.email || '--');
                    $('#displayEmergencyContact').text(response.emergencyContact || '--');
                    
                    // 住宿信息
                    $('#displayDormId').text(response.dormId ? `#${response.dormId}` : '未分配');
                    $('#displayBedNumber').text(response.bedNumber || '--');
                    
                    // 显示模态框中的详细信息
                    $('#infoStudentId').text(response.studentId || '--');
                    $('#infoName').text(response.name || '--');
                    $('#infoGender').text(response.gender || '--');
                    $('#infoBirthDate').text(formatDate(response.birthDate));
                    $('#infoIdCard').text(response.idCard ? response.idCard.replace(/^\d{3}\d{11}(\d{4})$/, "***********$1") : '--');
                    $('#infoCollege').text(response.college || '未分配');
                    $('#infoMajor').text(response.major || '未分配');
                    $('#infoClassName').text(response.className || '未分配');
                    $('#infoStatus').text(response.status || '--');
                    $('#infoDormId').text(response.dormId ? `#${response.dormId}` : '未分配');
                    $('#infoBedNumber').text(response.bedNumber || '--');
                    $('#infoPhone').text(response.phone || '--');
                    $('#infoEmail').text(response.email || '--');
                    $('#infoEmergencyContact').text(response.emergencyContact || '--');
                    $('#infoUsername').text(response.username || '--');
                } else {
                    alert("信息加载失败：" + (response.msg || '服务器返回数据格式不正确'));
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX请求错误:', status, error);
                alert("服务器连接异常: " + error);
            }
        });
    }
    /*// 加载学生信息
    function loadStudentInfo() {
        $.ajax({
            url: 'selectinfo',
            type: 'GET',
            data: {
                username: loginAccount
            },
            success: function(response) {
                try {
                    // 尝试解析响应数据
                    if (typeof response === 'string') {
                        response = JSON.parse(response);
                    }
                    if (response.code === 200) {
                        showStudentInfo(response.data);
                    } else {
                        // 显示具体错误信息
                        alert("信息加载失败：" + (response.msg || '未知错误'));
                    }
                } catch (error) {
                    // 处理解析错误
                    alert("信息加载失败：响应数据解析错误");
                    console.error('响应数据解析错误:', error);
                }
            },
            error: function() {
                alert("服务器连接异常");
            }
        });
    }*/
    // 显示学生信息模态框
    function showStudentInfo(data) {
        // 基础信息
        $('#infoStudentId').text(data.studentId || '--');
        $('#infoName').text(data.name || '--');
        $('#infoGender').text(data.gender || '--');
        $('#infoBirthDate').text(formatDate(data.birthDate));

        // 身份信息（脱敏处理）
        $('#infoIdCard').text(data.idCard ? data.idCard.replace(/^(\d{3})\d{11}(\d{4})$/, "$1***********$2") : '--');

        // 学业信息
        $('#infoCollege').text(data.college || '未分配');
        $('#infoMajor').text(data.major || '未分配');
        $('#infoClassName').text(data.className || '未分配');
        $('#infoStatus').text(getStatusText(data.status));

        // 住宿信息
        $('#infoDormId').text(data.dormId ? `#${data.dormId}` : '未分配');
        $('#infoBedNumber').text(data.bedNumber || '--');

        // 联系信息
        $('#infoPhone').text(data.phone || '--');
        $('#infoEmail').text(data.email || '--');
        $('#infoEmergencyContact').text(data.emergencyContact || '--');

        // 账户信息
        $('#infoUsername').text(data.username || '--');

        // 显示模态框
        $('#infoModal').modal('show');
    }

    // 辅助函数：状态映射
    function getStatusText(statusCode) {
        const statusMap = {
            '0': '毕业',
            '1': '在读',
            '2': '休学',
            '3': '退学'
        };
        return statusMap[statusCode] || '未知状态';
    }
    
    // 日期格式化函数
    function formatDate(dateString) {
        if (!dateString) return '--';
        const date = new Date(dateString);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    //退出系统
    function exitSys(){
        let anw= window.confirm("确定要退出系统吗？")
        if (anw){
            $.ajax({
                url:'exitstusys',
                type:'post',
                dataType:'text',
                success:function (res){
                    if (res=='Y'){
                        localStorage.removeItem("account")    //清楚本地标记
                        document.getElementById("loginUser").innerText=""
                        window.location.href = "stuLogin.html"     //退出系统后，返回登录页面
                        alert("成功退出系统")
                        // window.location.reload()
                    }
                }
            })
        }
    }

</script>